<template>
    <div id="rankDetail">
        <el-tabs type="border-card">
             <div class="userMsg">
                <h3>账号详情</h3>
                <div class="item-msg">
                    <span>账号：</span>
                    {{userinfo.username}}
                </div>
                <div class="item-msg">
                    <span>QQ：</span>
                    {{userinfo.qq}}
                </div>
                <div class="item-msg">
                    <span>手机：</span>
                    {{userinfo.mobile}}
                </div>
                <div class="item-msg">
                    <span>设备号：</span>
                    {{userinfo.imeil}}
                </div>
                <div class="item-msg">
                    <span>手机系统：</span>
                    <template v-if="userinfo.device==1">
                        pc
                    </template>
                    <template v-else-if="userinfo.device==2">
                        安卓
                    </template>
                    <template v-else-if="userinfo.device==3">
                        苹果
                    </template>
                </div>
                <div class="item-msg">
                    <span>渠道号：</span>
                    {{userinfo.agent}}
                </div>
                <div class="item-msg">
                    <span>推广员：</span>
                    {{userinfo.agent_username}}
                </div>
                <div class="item-msg">
                    <span>总计充值：</span>
                    {{userinfo.total||0}}
                </div>
             </div>
             <el-table
                :data="tableData"
                :cell-style="cellColor"
                style="width: 100%">
                <el-table-column
                prop="name"
                label="游戏名称">
                </el-table-column>

                <el-table-column
                prop="number"
                label="充值次数">
                </el-table-column>

                <el-table-column
                prop="amount"
                label="充值金额">
                </el-table-column>

                <el-table-column
                prop="create_time"
                :formatter="dateFormat"
                label="最后充值日期">
                </el-table-column>

                <el-table-column
                prop="num"
                label="登录次数">
                </el-table-column>

                <el-table-column
                prop="last_logintime"
                :formatter="dateFormat"
                label="最后登录日期">
                </el-table-column>

            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
                    :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </el-tabs>
    </div>
</template>

<script>
    import {accountDetail} from 'api/server'
    import {formatDate} from 'common/js/date'
    export default {
        data(){
            return{
                tableData:[],
                listQuery: {
                    page: 1,
                    limit: 10
                },
                total: 0,
                userinfo:{}
            }
        },
        created(){
            this.init();
        },
        methods:{
            init(){
                let userName=this.$route.params.name;
                accountDetail(userName,this.listQuery.page,this.listQuery.limit).then(res=>{
                    if(res.data.error==0){
                        this.total=parseInt(res.data.content.total);
                        this.tableData=res.data.content.data;
                        this.userinfo=res.data.content.userinfo;
                    }
                })
            },
            handleSizeChange(val) {
                this.listQuery.limit = val
                this.init();
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.init();
            },
            dateFormat(row,column){
                if(column.property=="last_logintime"){
                    var time=row.last_logintime;
                    if(!time) return
                }else if(column.property=="create_time"){
                    var time=row.create_time;
                    if(!time) return
                }
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            },
            cellColor(row,column){
                let threeAgo=this.FunGetDateStr(-3) + " 00:00:00";
                if(row.column.label=="最后登录日期"&&row.row.last_logintime*1000<new Date(threeAgo).getTime()){
                     return 'color:red';
                }
            },
            FunGetDateStr(p_count){
                let dd = new Date();
                dd.setDate(dd.getDate() + p_count);
                let y = dd.getFullYear();
                let m = dd.getMonth() + 1;
                let d = dd.getDate();
                return y + "-" + m + "-" + d;
            }
        },
        beforeRouteLeave(to, from, next){
            console.log(to)
            if(to.name=="accountRank"){
                window.sessionStorage.setItem('direction', 'back');
            }
            next();
        },  
        watch:{
            $route(){
               this.init();
            }
        }
    }
</script>

<style scoped lang="scss">
.userMsg{
    text-align: left;
    h3{
        margin-bottom:20px;
        font-weight:normal;
    }
    .item-msg{
        padding-left:20px;
        line-height:26px;
        font-size:14px;
        span{
            display:inline-block;
            min-width:80px;
            text-align: right;
        }
    }
}
</style>